import React, {PureComponent} from 'react';
import {connect} from "react-redux";
import {Modal, Table} from 'antd';
import ShowUserInfo from './component/ShowUserInfo'
import ShowUserAcc from './component/ShowUserAcc'
import UpdatePsw from './component/updatePsw';
import IndexRecommend from './component/IndexRecommend';
import MsgList from './component/MsgList';


class MembersList extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            pageNum: 1,
            pageSize: 10,
            userName: '',
            email: '',
            gender: '',
            phone: '',
            startTime: '',
            endTime: '',
            visible: false,
            record: {},
            balanceRecord: {},
            // title: [],
            current: 1,
            status: false,
            idRecord: {},
            recommend: false,
            msgList:false,
            memberInfo: {}

        }

        this.columns = [
            {
                title: 'ID',
                dataIndex: 'id',
                align: 'center',
            },
            {
                title: '用户昵称',
                dataIndex: 'nickName',
                align: 'center',
                render: (_, record) => {
                    return (
                        <div>
                            {_}({record.autoId})
                        </div>
                    );
                },
            },
            // {
            //     title: '用户类型',
            //     dataIndex: 'mobile',
            // },
            {
                title: '手机号',
                dataIndex: 'mobile',
                align: 'center',
            },
            {
                title: '推荐人',
                dataIndex: 'recommendPerson',
                align: 'center',
            },
            {
                title: '姓名',
                align: 'center',
                dataIndex: 'name',
            },
            {
                title: '城市',
                align: 'center',
                dataIndex: 'area',
            },
            {
                title: '系统',
                align: 'center',
                render: (_, record) => {
                    return (
                        <div>
                            {record.source === 2 ? <a style={{color: "blue"}}>IOS</a> : <div>Android</div>}
                        </div>
                    );
                }
            },
            {
                title: '余额',
                align: 'center',
                dataIndex: 'balance',
            },
            {
                title: '充币总额',
                dataIndex: 'rechargeMoney',
                align: 'center',
            },
            {
                title: '充卡总额',
                dataIndex: 'rechargeCardMoney',
                align: 'center',
            },
            {
                title: '提现总额',
                dataIndex: 'operateMoney',
                align: 'center',
            },
            {
                title: '支出总额',
                dataIndex: 'consumeMoney',
                align: 'center',
            },
            {
                title: '收入总额',
                dataIndex: 'incomeMoney',
                align: 'center',
            },
            // {
            //     title: '下级返佣',
            //     dataIndex: 'commission',
            //     // key: 'commission',
            // },
            {
                title: '备注',
                dataIndex: 'remarks',
                align: 'center',
            },
            {
                title: '注册时间',
                dataIndex: 'addTime',
                align: 'center',
                sorter: (a, b) => new Date(a.addTime).getTime() - new Date(b.addTime).getTime()
            },
            {
                title: '最后登录时间',
                dataIndex: 'lastVisitTime',
                align: 'center',
                sorter: (a, b) =>  new Date(a.lastVisitTime).getTime() - new Date(b.lastVisitTime).getTime()

            },
            {
                title: '首页推荐',
                render: (_, record) => {
                    return (
                        <div>
                            {record.status == 1 ? '' : record.cate.length === 0 ? '' :
                                <a onClick={() => this.recommend(record)}>超值推荐</a>}
                        </div>
                    );
                }
            },
            {
                title: '状态',
                dataIndex: 'status',
                align: 'center',
                render: (_, record) => {
                    return (
                        <div>
                            {record.status === 0 ? <a onClick={() => this.changeOff(record)}>正常</a> :
                                <a onClick={() => this.changeOn(record)} style={{color: "grey"}}>禁用</a>}
                        </div>
                    );
                }
            },
            {
                title: "操作",
                fixed: 'right',
                width: 260,
                // dataIndex: "action",
                render: (_, record) => {
                    return (
                        <div>
                            <a onClick={() => this.userInfo(record)}>详情</a>
                            <a onClick={() => this.changeAcc(record)} style={{marginLeft: 20}}>账变</a>
                            <a onClick={() => this.updatePsw(record)} style={{marginLeft: 20}}>修改密码</a>
                            <a onClick={() => this.msgList(record)} style={{marginLeft: 20}}>消息</a>
                        </div>
                    );
                }
            }

        ];
    }

    componentDidMount() {

        this.init();
    }

    init = () => {
        const {userList} = this.props
        userList({page: 1, size: 10,audit:0})
    }

    handleChangeMembersList = (current, pageSize) => {
        const {newValues} = this.props
        //
        newValues.page = current
        newValues.size = 10
        this.setState({current})
        this.props.userList({...newValues})
    }

    userInfo = (record) => {
        this.setState({
            visible: true,
            title: 1,
            record
        })
        this.props.detail({mId: record.id})

    }
    changeAcc = (record) => {
        this.setState({
            visible: true,
            title: 2,
            balanceRecord: record
        })
        // const { accBalanceLog } = this.props
        // accBalanceLog().then(res => {
        //     accBalanceLog({ mId: this.state.balanceRecord.id })
        // })
    }
    handleCancel = () => {
        this.setState({
            visible: false,
        })

    }
    cancel = () => {
        this.setState({
            status: false,
            recommend: false,
            msgList:false
        })
    }

    updatePsw = (record) => {

        this.setState({
            status: true,
            idRecord: record.autoId
        })
    }
    changeOff = (record) => {
        //
        const {changeStatus} = this.props
        const {current} = this.state
        // const id = record.id + ''
        //
        changeStatus({mId: record.id, status: 1}).then(res => {
            this.props.userList({page: current, size: 10})
        })
    }
    changeOn = (record) => {
        //
        const {changeStatus, data} = this.props
        const {current} = this.state
        changeStatus({mId: record.id, status: 0}).then(res => {
                this.props.userList({page: current, size: 10})
            }
        )
    }

    recommend = (record) => {
        this.setState({
            recommend: true,
            memberInfo: record
        })

    }
    msgList = (record) => {
        this.setState({
            msgList: true,
            memberInfo: record
        })

    }
    showTotal =(total,rang)=>{
        return `共:`+total
    }

    render() {
        const {data, userTotal, userLoading, searchData} = this.props;
        const {status, current, visible, title, record, balanceRecord, idRecord, recommend, memberInfo,msgList} = this.state;

        const pagination = {
            current: current,//当前页
            total: data.total,//总条数
            pageSize: data.size,//页大小
            onChange: this.handleChangeMembersList,
            showQuickJumper: true,//快速跳转
            showSizeChanger: false,//大于50时显示pageSize切换器
            showTotal:this.showTotal
        };
        return (
            <div>
                <Table columns={this.columns} loading={userLoading} dataSource={data.records}
                       rowKey={record => record.id} pagination={pagination}
                       scroll={{x:'max-content'}}

                />

                <Modal destroyOnClose visible={visible} title={title === 1 ? '用户详情' : '帐变记录'}
                       width={title === 1 ? 500 : 1500} footer={null} onCancel={this.handleCancel}>
                    {title === 1 ? <ShowUserInfo record={record}></ShowUserInfo> :
                        <ShowUserAcc record={balanceRecord}></ShowUserAcc>}
                </Modal>

                <Modal destroyOnClose visible={status} title='修改密码' footer={null} onCancel={this.cancel}>
                    <UpdatePsw record={idRecord} onCancel={this.cancel}></UpdatePsw>
                </Modal>
                <Modal destroyOnClose visible={recommend} title='添加推荐' footer={null} onCancel={this.cancel}>
                    <IndexRecommend record={memberInfo} onCancel={this.cancel}></IndexRecommend>
                </Modal>
                <Modal destroyOnClose={true} visible={msgList} title='消息列表'  width={title === 1 ? 500 : 1500} footer={null}  onCancel={this.cancel}>
                    <MsgList  record={memberInfo} onCancel={this.cancel}/>
                </Modal>

            </div>
        );
    }
}


const mapState = state => ({
    ...state.users

});

const mapDispatch = dispatch => ({
    ...dispatch.users
})

export default connect(mapState, mapDispatch)(MembersList);